<template>
 <van-swipe class="my-swipe" :autoplay="3000" indicator-color="0f73ee" >
  <van-swipe-item><img src="../../../src/img/-e3-Art_1.png" alt=""><p>寻找居住地方</p> <p class="p1">打开我们的APP即可方便快捷找到合适你居住的地方，房源众多</p></van-swipe-item>
  <van-swipe-item><img src="../../../src/img/Art_2.png" alt=""><p>匹配适合的合租对象</p><p class="p1">告诉我们你的兴趣爱好，我们将匹配合适您一起居住的合租对象</p> </van-swipe-item>
  <van-swipe-item><img src="../../../src/img/Art_3.png" alt=""><p>志同道合的人</p> <p class="p1">和你一样的人一起生活</p></van-swipe-item>

</van-swipe>
<van-button  @click="fn" class="buttom" color="linear-gradient(to right, #0f73ee, #bb47fb)">
 登录账户
</van-button>

</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();

let fn=()=>{
  console.log(1)
  router.push('/login')
}
</script>
<style lang="less" scoped>
template{
  background-color: #fff;
}
  .my-swipe .van-swipe-item {
    color: #fff;
    
    height: 550px;
    font-size: 20px;
    // line-height: 150px;
    text-align: center;
   
 
   p{
    margin: auto;
    margin-top: 30px;
    color: #020433;
    font-size: 20px;
    letter-spacing: 2px;
  
  //  border: 3px solid;
  //  display: block;
  //  margin-top: -100px;
   }
   .p1{
    word-wrap: break-word;
    font-size: 12px;
    color: #404b69;
    width:300px;
    overflow: hidden;;
   }

  }
  .van-swipe__indicators{
    color: #5496cb;
  }
  img{
    width: 100%;
    // height: 290px;
    // border: 1px solid ;
  }
  .buttom{
    margin-left: 40px;
    width:300px ;
    height: 50px;
  }
  .login{
    height: 25px;
    font-size: 12px;
    margin-top:25px;
    font-weight: bold;
    text-align: center;
    color: #020433;
  }
</style>